<template>
    <el-main>
      <el-form :inline="true" :model="queryForm" class="demo-form-inline">
        <span class="demonstration">账单日：</span>
        <el-date-picker
          v-model="queryForm.billDayStart"
          type="date"
          placeholder="选择日期">
        </el-date-picker>~
        <el-date-picker
          v-model="queryForm.billDayEnd"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="batchNo"
          label="对账批次"
          width="120">
        </el-table-column>
        <el-table-column
          prop="billDay"
          label="账单日"
          width="120">
        </el-table-column>
        <el-table-column
          prop="billType"
          label="账单类型"
          width="120">
          <template slot-scope="scope">
          <span v-if="scope.row.billType==1">
            代付
          </span>
            <span v-else-if="scope.row.billType==2">
            快捷
          </span>
            <span v-else-if="scope.row.billType==3">
            微信
          </span>
            <span v-else-if="scope.row.billType==4">
            支付宝
          </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="tradeQudao"
          label="渠道名称"
          width="120">
          <span>
            卡拉卡
          </span>
        </el-table-column>
        <el-table-column
          prop="checkCount"
          label="渠道对账文件交易数量"
          width="150">
        </el-table-column>
        <el-table-column
          prop="orderCount"
          label="系统交易流水数量"
          width="140">
        </el-table-column>
        <el-table-column
          prop="diffCount"
          label="差错账数量"
          width="120">
        </el-table-column>
        <el-table-column
          prop="checkDay"
          label="对账日期"
          width="120">
        </el-table-column>
        <el-table-column
          prop="createType"
          label="生成方式"
          width="120">
          <template slot-scope="scope">
          <span v-if="scope.row.createType==1">
            自动对账生成
          </span>
            <span v-else-if="scope.row.createType==2">
            手动对账生成
          </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="completeState"
          label="是否对账完成"
          width="120">
          <template slot-scope="scope">
          <span v-if="scope.row.completeState==1">
            完成
          </span>
            <span v-else-if="scope.row.completeState==2">
            未完成
          </span>
            <span v-else-if="scope.row.completeState==2">
            取消
          </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="confirmDate"
          label="对账确认时间"
          width="120">
          <template slot-scope="scope">

          </template>
        </el-table-column>
        <el-table-column
          label="操作">
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryForm.pageNum"
        :limit.sync="queryForm.pageSize"
        @pagination="getList"
      />
    </el-main>
</template>

<script>
  import {payList} from "@/api/system/batch";
  export default {
      name: "index",
      data(){
          return{
            queryForm:{
                pageNum:1,
                pageSize:8,
                billDayStart:undefined,
                billDayEnd:undefined
            },
            tableData:{},
            total:0
          }
      },
    methods:{
      /** 对账批次查询 */
      getList() {
        payList(this.queryForm).then(response => {
          this.tableData = response.data.list;
          this.total = response.data.total;
        });
      },
      /** 重置按钮 */
      resetQuery(){
        this.queryForm={
          pageNum:1,
            pageSize:8,
            billDayStart:undefined,
            billDayEnd:undefined
        }
        this.handleQuery();
      },
      /** 条件查询 */
      handleQuery() {
        this.queryForm.pageNum = 1;
        this.getList();
      },
    },
    created() {
        this.getList();
    }
  }
</script>

<style scoped>

</style>
